<template>
  <chart :options="options" width="100%" height="30vh" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const options = ref({})

onMounted(() => {
  initEchart()
})

const initEchart = () => {
  const colorList = [
    '#91c6ae',
    '#c13933',
    '#304554',
    '#62a0a8',
    '#d38366',
    '#FF8D3A'
  ]
  const nameList = [
    '轮式拖拉机',
    '稻麦收割机',
    '烘干机',
    '插秧机',
    '无人机',
    '其它收割机'
  ]
  const m2R2Data = [
    {
      value: 335,
      value1: 234,
      legendname: nameList[0],
      name: nameList[0],
      itemStyle: {
        color: colorList[0]
      }
    },
    {
      value: 310,
      value1: 314,
      legendname: nameList[1],
      name: nameList[1],
      itemStyle: {
        color: colorList[1]
      }
    },
    {
      value: 234,
      value1: 235,
      legendname: nameList[2],
      name: nameList[2],
      itemStyle: {
        color: colorList[2]
      }
    },
    {
      value: 154,
      value1: 213,
      legendname: nameList[3],
      name: nameList[3],
      itemStyle: {
        color: colorList[3]
      }
    },
    {
      value: 335,
      value1: 321,
      legendname: colorList[4],
      name: colorList[4],
      itemStyle: {
        color: colorList[4]
      }
    }
  ]

  options.value = {
    tooltip: {
      trigger: 'item',
      formatter: function (parms: Record<string, any>) {
        var str =
          parms.seriesName +
          '</br>' +
          parms.marker +
          '' +
          parms.data.legendname +
          '</br>' +
          '当前温度：' +
          parms.data.value +
          '</br>' +
          '目标温度：' +
          parms.data.value1 +
          '</br>' +
          '占比：' +
          parms.percent +
          '%'
        return str
      }
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      left: '75%',
      align: 'left',
      top: 'middle',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '全网调控情况',
        type: 'pie',
        center: ['35%', '50%'],
        radius: ['35%', '50%'],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        itemStyle: {
          //图形样式
          normal: {
            borderColor: '#ffffff',
            borderWidth: 1
          }
        },
        label: {
          normal: {
            show: true,
            position: 'outter',
            formatter: function (parms: Record<string, any>) {
              return parms.data.legendname
            }
          }
        },
        labelLine: {
          normal: {
            length: 15,
            length2: 13,
            smooth: true
          }
        },
        data: m2R2Data
      }
    ]
  }
}
</script>

<style scoped></style>
